<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>订单管理</title>
		<link rel="stylesheet" href="layui2/src/css/layui.css" media="all">
		<script src="layui2/src/layui.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/cpexcel.js"></script>
		<script src="js/shim.js"></script>
		<script src="js/jszip.js"></script>
		<script src="js/xlsx.js"></script>
		
		<!-- <script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
		
		<script type="text/javascript" src="//unpkg.com/blob.js@1.0.1/Blob.js"></script>
		<script type="text/javascript" src="//unpkg.com/file-saver@1.3.3/FileSaver.js"></script> -->

	</head>
	<style>
		.a-upload {
		  position: relative;
		    display: inline-block;
		
		    border: 1px solid #99D3F5;
		
		    overflow: hidden;
		
		    text-decoration: none;
		    text-indent: 0;
		}
		.a-upload  input {
		    position: absolute;
		    font-size: 20px;
		    right: 0;
		    top: 0;
		    opacity: 0;
		
		}
		
		.a-upload:hover {
		     background: #AADFFD;
		    border-color: #78C3F3;
		    color: #004974;
		    text-decoration: none;
		
		}
		.layui-table-edit{
	    border-color: blue;
	    outline: 0;
			
	   /* -webkit-box-shadow: inset 0 1px 1px  red,0 0 8px  yellow;
	    box-shadow: inset 0 1px 1px  red,0 0 8px  yellow; */
	}
	.layui-table[lay-even] tr:nth-child(even){background-color:skyblue}
	/* //even:true  开启隔行样式 */
	
	.layui-table{width:100%;background-color:white;color:black;font-size: 25px;}
	.layui-table tbody tr:hover,.layui-table-hover{background-color:orange}
	
	
body .demo-class .layui-layer-title{background:darkorange; color:#fff; border: none;}
body .layui-layer-title{background:darkorange; color:#fff; border: none;}

body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:blueviolet;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999999;}

</style>
	<body>
		<div style="margin-top: 3%;margin-left: 2%;margin-right: 3%;">

		<script type="text/html;text/javascript" id="toolbarDemo">

			<div class="layui-btn-container layui-inline">
	<button class="layui-btn layui-btn-danger" lay-event="deleteSome"><i class="layui-icon"></i>删除</button>
	<button class="layui-btn " onclick="add()"><i class="layui-icon"></i>添加</button>
	
		<button class="a-upload layui-btn" onclick="daochu()">
			导入
		</button>
	
		<button class="layui-btn"  lay-event="daochu" id="chu">导出</button>
	
	
	  <span class="layui-btn layui-btn-sm" lay-event="getChecked">获得选中的数据</span>
	  <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="getCheckedStatus">f </span>
	 
	 {{# if(d.checkStatus) {}}
	 {{# } }}
	 {{# if(d.id === 'demo'){ }}

	
	 {{# } }}
	
	 
	 <span class="layui-btn" style="padding:0%;width: 10%;margin-left: 0;" >
		 <input type="text" name="username" placeholder="关键字"  class="layui-input" style="width: 100%;">
	 </span>
	 <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
	  <button class="layui-btn" lay-event="reload"  style="margin-left: 0;" id="rad" >刷新</button>
	  
	  
		
	 <!-- </div> -->
	
  </div>
  
	</script>
	<span class="a-upload layui-btn" style="Display:none;">

		<input type="file" name="xlfile" id="xlf" >导入

	</span>
	
		<table class="layui-hide" lay-id="demo2" lay-filter="test" id="test"></table>

		<script type="text/html" id="sel_update_time">
			<input type="password" name="date" id="sel_create_date{{d.id}}" value="{{d.password}}"  class="layui-table-cell  pass" style="position: absolute;right: 0;top: -20%;bottom: 0%;left: 0;width: 100%;height: 155%;border-width: 0;padding-left: 5%; background-color:white" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onchange="onChangeTest(this)" >
</script>

	

			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
		
		</div>
		 
		<script type="text/javascript">
			

			function onChangeTest(changeVal) {
				var val = parseInt(changeVal["attributes"][1]["value"].substring(15, changeVal["attributes"][1]["value"].length));

				function objFn(obj, objIndex, objs) {

					if (obj.id == val)
						return objs;

				}
				var neww = changeVal.value;
				// var old=changeVal.defaultValue;


				layui.use(['table'], function() {
					var table = layui.table;

					bo = ($("#img").attr("src") == "images/look_p2.png");
					// alert("bo:"+bo)
					if (neww.length < 6) {
						table.reload('test', {
							data: data_json
						});
						if (bo) {
							$("#img").attr("src", 'images/look_p2.png');
							$(".pass").removeAttr("type")
						}
						layer.msg("密码不能少于6个字符！", {
							icon: 4
						});
					} else if (neww.length > 16) {
						table.reload('test', {
							data: data_json
						});
						if (bo) {
							$("#img").attr("src", 'images/look_p2.png');
							$(".pass").removeAttr("type")
						}
						layer.msg("密码不能超过16个字符！", {
							icon: 4
						});
					}
				})
				var wpw = data_json.findIndex(objFn);
				$.post("http://localhost:86/HBuilder/xops/Back.php", {
					type: "User",
					operation: "update",
					account: data_json[wpw]["account"],
					password: "password",
					phone: neww,
					token: "1ab66e59325257b60b971d4afa1505ce"
				}, function(data, ss) {
					// alert("data:"+data)
					var obj = JSON.parse(data);
					if (obj.code == 200) {
						layer.msg('更新成功！', {
							icon: 1
						});
					} else {
						layer.msg('更新失败！', {
							icon: 1
						});
					}
				})


			}

			function wm() {

				if ($("#img").attr("src") == "images/look_p1.png") {
					$("#img").attr("src", 'images/look_p2.png');
					$(".pass").removeAttr("type")

				} else {
					$("#img").attr("src", 'images/look_p1.png');
					$(".pass").attr("type", "password");
				}

				// var img = new Image();  
				//        img.src = "images/look_p1.png";
				// 			alert("sv:"+img.src)
				//        var imgHtml = "<img src='" + img.src + "' width='500px' height='500px'/>";  
				//        //弹出层
				//        layer.open({  
				//            type: 1,  
				//            shade: 0.8,
				//            offset: 'auto',
				//            area: [500 + 'px',550+'px'],
				//            shadeClose:true,
				//            scrollbar: false,
				//            title: "图片预览", //不显示标题  
				//            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
				//            cancel: function () {  
				//                layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
				//            }  
				//        }); 
			}

			//     function previewImg(obj) {  //原始图片大小
			// 			 var img = new Image();  
			//         img.src = obj.src;
			//         var height = img.height + 50; //获取图片高度
			//         var width = img.width; //获取图片宽度
			//         var imgHtml = "<img src='" + obj.src + "' />";  
			//         //弹出层
			//         layer.open({  
			//             type: 1,  
			//             shade: 0.8,
			//             offset: 'auto',
			//             area: [width + 'px',height+'px'],
			//             shadeClose:true,//点击外围关闭弹窗
			//             scrollbar: false,//不现实滚动条
			//             title: "图片预览", //不显示标题  
			//             content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
			//             cancel: function () {  
			//                 //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
			//             }  
			//         });
			// 
			//     }


	


			data_json = "";
			resc = 1;

			$.post("http://localhost:86/HBuilder/xops/Back.php", {
				type: "User",
				operation: "search",
				curr: 1,
				nums: 10,
				token: "1ab66e59325257b60b971d4afa1505ce"
			}, function(data, status) {

				data_json = JSON.parse(data);
				data_json = data_json["data"];
				// alert("data:"+(data));

			})
			layui.config({
				base: 'test/js/'
			}).use(['testTablePlug'], function() {
				var $ = layui.jquery,
					layer = layui.layer //弹层
					// , form = layui.form //弹层
					,
					table = layui.table //表格
					,
					tablePlug = layui.tablePlug; //表格插件

				// 当前这个测试页面测试的重点不是智能重载，所以关掉该功能，实际上该功能也是默认关闭的，可以不执行下面这句代码，也可以强制指定。
				tablePlug.smartReload.enable(false);
layer.config({
  skin: 'demo-class'
})			// 处理操作列
				var fn1 = function(field) {
					return function(data) {
						return data[field];
					};
				};



				table.render({
					// elem: '#demo2'
					elem: '[lay-id="demo2"]'
						// , height: 'full-200'
						// , url: 'json/data11.json' //数据接口
						,
					data: data_json

						,
					title: '订单表',
					page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] //自定义分页布局
							,
						curr: 1 //设定初始在第 5 页
							,
						groups: 5 //只显示 1 个连续页码
							,
						first: true //不显示首页
							,
						last: true //不显示尾页

					},
					// even:true
					// , page: false
					// ,
					text: {
						none: '无数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
					},
					limit: 10,
					loading: true,
					limits: [10, 20, 40, 80],
					toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
						// , totalRow: true //开启合计行
						,
					cellMinWidth: 90
						// , autoSort: false // 不进行前端排序
						,
					done: function(res, curr, count) {

						var tableView = this.elem.next();
						var totalRow = tableView.find('.layui-table-total');
						var limit = this.page ? this.page.limit : this.limit;
						layui.each(totalRow.find('td'), function(index, tdElem) {
							tdElem = $(tdElem);
							var text = tdElem.text();
							if (text && !isNaN(text)) {
								text = (parseFloat(text) / limit).toFixed(2);
								tdElem.find('div.layui-table-cell').html(text);
							}
						});
						if ($("#img").attr("src") == "images/look_p2.png") {
							$(".pass").removeAttr("type")

						}
						resc = curr;
						console.log("res:", res);

						//得到当前页码
						console.log("curr", curr);

						//得到数据总量
						console.log("co", count);


					},
					parseData: function(ret) {
							return {
								code: ret.code,
								// msg: ret.msg,
								count: ret.count,
								data: ret.data
							}
						}
						// 定制当前数据的主键字段，默认为id，
						,
					primaryKey: 'id'
						// 是否开启复选列状态记录 支持true/false/{} true的情况下primaryKey默认为id，default默认为[]
						// primaryKey: 'username', // 可以定义成其他的字段，但是有一个要求，就是这个字段的值必须有唯一性约束，这个是一个判断记录是否相同重要的条件
						,
					checkStatus: {
						// 原始已经选中的记录的主键值集合
						default: []
					},
					checkDisabled: {
						enabled: true,
						data: []
					},
					cols: [
						[{
								type: 'numbers',
								fixed: 'left',
								title: '序号',
								minWidth: "5%"
								// LAY_CHECKED: true
							},
							{
								type: 'checkbox',
								id: "ee",
								fixed: 'left',
								minWidth: "5%"

							}, {
								field: 'id',
								title: 'ID',
								width: 80,
								fixed: 'left',
								unresize: true,
								sort: true,

								fixed: 'left',
								minWidth: "10%"
								// minWidth: 500,
								// event:'ddd',

							}, {
								field: 'account',
								title: '用户名',
								minWidth: 120,
								width: '15%',
								edit: 'text',
								fixed: 'left',
								minWidth: "10%",
								id: "dddd"

							},
							{
								field: 'password',
								title: '<div  onclick="wm()">密码 &nbsp;&nbsp;<img src="images/look_p1.png" id="img"  width="12%"  "/></div>',
								templet: '#sel_update_time',
								width: '15%',

								minWidth: 120,
							},

							// 							, {
							// 								field: 'password',
							// 								title: '密码',
							// 								minWidth: 120,
							// 								width: '15%',
							// 								edit: 'text',
							// 								fixed: 'center',
							// 
							// 								sort: true,
							// 								minWidth: "12%"
							// 							}, 
							{
								field: 'tel',
								title: '电话',
								width: '15%',
								minWidth: 120,
								edit: 'text',
								fixed: 'right',
								sort: true,
								minWidth: "10%"
							}, {
								field: 'datetime',
								title: '注册时间',

								// width:'15%',
								// edit: 'text',
								fixed: 'right',
								minWidth: 120,
								sort: true,

							}

							
							// ,

							// {
							// 	field: 'account',
							// 	title: '<div  onclick="wm()">密码 &nbsp;&nbsp;<img src="images/look_p1.png" id="img"  width="18%" height="8%"/></div>',
							// 	templet: '#sel_update_time',
							// 	width: 180
							// }
							,{
							    fixed: 'right',
							    type: 'toolbar',
							    field: 'toolbar_common',
							    title: '操作1',
							    width: 190,
							    align: 'right',
							    toolbar: '#barDemo',
							    // rowspan: 2
							  }


						]
					]
				});

				$(document).on('click', '.layui-table-view .layui-table-body tr', function(event) {
					var trElem = $(this);
					var tableView = trElem.closest('.layui-table-view');
					tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
					tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
				})

			});


			function GetValue(data) {

				data_json.push(data);
				layui.use('table', function() {
					var table = layui.table;
					table.reload('test', {
						data: data_json,

					});
				});

			}

			function add() {
				layer.open({
					type: 2,
					title: '添加用户数据',
					shadeClose: true,
					shade: false,
					maxmin: true, //开启最大化最小化按钮
					anim: 2, //动画从下到上


					area: ['600px', '400px'],
					content: 'html/member-add.html'
				});
			}
		</script>
			<script>
				;
				function daochu(){
					$('#xlf').trigger("click");
				}
			
		
			var X = XLSX;
			var XW = {
				/* worker message */
				msg: 'js/xlsx',
				/* worker scripts */
				worker: 'js/xlsxworker.js'
			};
		
			var global_wb;
		     
			var process_wb = (function() {
		
		
				function get_format() {
					return "json";
				}
		
				var to_json = function to_json(workbook) {
					var result = {};
					workbook.SheetNames.forEach(function(sheetName) {
		
						var roa = X.utils.sheet_to_json(workbook.Sheets[sheetName], {
							header: 1
						});
						// alert("dd:"+sheetName+" "+roa.length)
						if (roa.length) result["data"] = roa;
					});
					// alert("hh:"+result);
					   p_test=0;
					arr_in = [];
					title = ["用户名", "密码", "电话"];
				
						arr_bj=[]
					res_str = "[";
					var uid = 0,
						pid = 0,
						tid = 0;
					for (var i in result) {
		
						for (var j in result[i]) {
		
							console.log("tt:", i, "--", j, "--", result[i][j])
							for (var z in result[i][j]) {
								if (j == 0) {
									for (var k in result[i][0]) {
										arr_in.push(result[i][0][k])
										switch (result[i][0][k]) {
											case "用户名":
												uid = k;
												break;
											case "密码":
												pid = k;
												break;
											case "电话":
												tid = k;
												break;
											default:
												break;
										}
										// console.log(" gggg ", uid, " ", pid, " ", tid, " ", "::", result[i][0])
		
									}
									break;
		
									// console.log(" gggg ", z, "::", result[i][0])
								}
								// console.log(i, "  ", j, "  ", z, "::", result[i][j][z])
								if (j > 0) {
									res_str += "{\"account\":\"" + result[i][j][uid] + "\",\"password\":\"" + result[i][j][pid] +
										"\",\"tel\":\"" + result[i][j][tid] + "\"},"
								}
		
								// alert("vv:"+" "+j+" "+z+" "+result[i][j][z])
								break;
		
		
							}
						}
		
					}
					res_str = res_str.substr(0, res_str.length - 1) + "]";
					// alert("str:" + res_str)
					result_str = JSON.stringify(result, 2, 2);
		           
					 
					alert(res_str)
					var c = isContained(arr_in, title);
				
					alert("rre:" + arr_in.join(",") + "==" + arr_bj.join(",")+"--")
					if (!c) {
						// alert("缺少标题栏：" + arr_bj.join(" "))
					layer.alert("缺少标题栏：" + arr_bj.join(","), {icon: 0}); 
					     p_test=1; 
					} else {
						userData=JSON.parse(res_str);
						// alert(res_str)
						 layui.sessionData('test', {
						  key: 'nickname'
						  ,value: userData
						});
					
							
				
					layui.use(['layer'], function() {
						var layer = layui.layer;
		                   layer.open({
		                     type: 2,
		                     area: ['700px', '500px'],
		                     fixed: false, //不固定
		                     maxmin: true,
							 	shadeClose: true,
							 shade: false,
		                     content: 'html/daoru-excel.html',
		                   	
		                   
		                   });
						    });
						
					}
				
				
					return JSON.stringify(result['data'], 2, 2);
				};
		
		
		
				return function process_wb(wb) {
					global_wb = wb;
					var output = "";
		
					switch (get_format()) {
		
						case "json":
							output = to_json(wb);
							break;
		
					}
					console.log('da:'+output)
					
									
				};
			})();
		
		
		
			function isContained(aa, bb) {
				if (!(aa instanceof Array) || !(bb instanceof Array) || ((aa.length < bb.length))) {
					return false;
				}
				var aaStr = aa.toString();
				// alert("len:"+aaStr)
				for (var i = 0; i < bb.length; i++) {
		
					if (aaStr.indexOf(bb[i]) < 0) {
						arr_bj.push(bb[i])
					}
		
				}
				if (arr_bj.length > 0)
					return false;
				return true;
			}
		
			var do_file = (function() {
				var rABS = typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString;
		
		
				return function do_file(files) {
					rABS = false;
					use_worker = false;
					var f = files[0];
					var reader = new FileReader();
					reader.onload = function(e) {
						if (typeof console !== 'undefined') console.log("onload", new Date(), rABS, use_worker);
						var data = e.target.result;
					
						if (!rABS) data = new Uint8Array(data);
						if (use_worker) xw(data, process_wb);
						else process_wb(X.read(data, {
							type: rABS ? 'binary' : 'array'
						}));
					};
					if (rABS) reader.readAsBinaryString(f);
					else reader.readAsArrayBuffer(f);
				};
			})();
		
		
		
			(function() {
				var xlf = document.getElementById('xlf');
				if (!xlf.addEventListener) return;
		
				function handleFile(e) {
					
					do_file(e.target.files);
					$("#xlf").val("");
					
				}
				xlf.addEventListener('change', handleFile, false);
				
			

			})();
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-36810333-1']);
			_gaq.push(['_trackPageview']);
		</script>
	</body>
</html>
